<script setup>
import { useModalStore, useDataStore } from '@/store';
import { useMessage } from 'naive-ui';
import { inject } from 'vue';

const modalStore = useModalStore();
const dataStore = useDataStore();
const message = useMessage();

// 通过 provide/inject 获取 coordinateCanvas 实例
const coordinateCanvasRef = inject('coordinateCanvasRef');

const handleConfirm = () => {
	// 直接清空数据
	dataStore.clearData();
	
	// 直接调用 canvas 方法
	if (coordinateCanvasRef?.value) {
		coordinateCanvasRef.value.clearCanvas();
	}
	
	message.success('清空画布成功');
	modalStore.closeClearCanvasModal();
}

const handleCancel = () => {
	modalStore.closeClearCanvasModal();
}

</script>
<template>
	<n-modal v-model:show="modalStore.showClearCanvasModal" block-scroll close-on-esc title="清空画布" preset="dialog" display-directive="if">
		<div class="popup-modal-content">
			<p>
				是否清空画布？
			</p>
		</div>
		<div class="dialog-footer">
			<n-button type="primary" @click="handleConfirm" size="small">确定</n-button>
			<n-button @click="handleCancel" size="small">取消</n-button>
		</div>

	</n-modal>
</template>
<style lang="scss" scoped>
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}
</style>